import { useState, useEffect, useRef, useContext } from 'react'
import { BarChartOutlined, CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { Button, Col, Row, Select, Table } from 'antd';
import * as echarts from 'echarts';

//import useMapGlobal from '../../../../../common/BusinessMap/useMapGlobal';
import echartsOptions from './echartsOptions';
import DarkBtn from '../../../../../common/DarkBtn';
import DarkCard from '../../../../../common/DarkCard';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
import LittleTitle from '../../../../../common/LittleTitle';
import CztApi from '../../../../../../utils/apis/CztApi';
import FxqyApi from '../../../../../../utils/apis/FxqyApi';
import ScrollTable from '../../../../../common/ScrollTable';
import { navByWkt } from '../../../../../../utils/helper/mapHelper';
import FxqhContext from '../SpecialMap/fxqhContext';
import Qytj from './QuYuTongJi';
import JcyjApi from '../../../../../../utils/apis/JcyjApi';


export default function StatisticAndList(props) {

    //const {  } = props.dataObj;
    //leftKey：具体调用哪个数据接口，值为1~5，
    const { leftKey, disasterType, setDetailSwitch, setStatisticAndListSwitch, setRowData, setTargetTemplate, setSelectedName, selectedName, setJyl } = useContext(FxqhContext);
    //setDetailSwitch：详情组件的开关函数：开
    //setStatisticAndListSwitch：组件本身的开关函数：关
    //setRowData:灾害点坐标
    //const [mapGlobal] = useMapGlobal();
    const map = useBusinessMap();
    const rootRef = useRef();
    const chartRef = useRef();
    // console.log('disasterType',disasterType)

    //接口获取到的数据
    const [disasterData, setDisasterData] = useState();


    //setStatData()配置接口获取数据，返回[{name:"区",value:"灾害数量",},]
    const [statData, setStatData] = useState();
    // useEffect(() => {
    //     if (statData) {
    //         const chart = echarts.init(chartRef.current);
    //         chart.setOption(echartsOptions(statData))
    //     }
    // }, [statData])


    //console.log('selectedName', selectedName, 'leftKey', leftKey,)


    // useEffect(() => {
    //配置5个接口,可能不需要配置5个接口，次页面展示数据都在隐患表内，可以按传入值做数据筛选

    // if (leftKey) {
    // if (leftKey === '1') {

    // } else if (leftKey === '2') {
    // FxqyApi.count_yh_xzqumc(selectedName).then(resp => {
    //     setStatData(resp?.data?.map(e => {
    //         return {
    //             name: e.xzqhmc,
    //             value: e.count,
    //         }
    //     }));
    //     //console.log('resp', resp);
    // })
    // FxqyApi.yhlx_find({ yhlx: selectedName }).then(resp => {
    //     setDisasterData(resp.rows)
    //console.log('resp2', resp);
    // })
    //     } else if (leftKey === '3') {

    //     } else if (leftKey === '4') {

    //     } else if (leftKey === '5') {

    //     }
    //  }
    // }, [selectedName])
    const [loading, setLoading] = useState()
    useEffect(() => {
        setLoading(true)
        FxqyApi.yhlx_find({ yhlx: selectedName }).then(resp => {
            if (selectedName === '地震灾害') {
                let dzDate
                dzDate = resp.rows.map(e => {
                    e.yhmc = e.ckdd
                    return e
                })
                //console.log('1',dzDate);
                setDisasterData(dzDate)
            } else {
                setDisasterData(resp.rows)
            }

            console.log('地震数据调整', resp);
        }).finally(e => {
            setLoading(false)
        })
        CztApi.stat(selectedName).then(data => {
            console.log('1', selectedName)
           
            if (data) {
                
                if (selectedName === '1' || selectedName === '2' || selectedName === '3' || selectedName === '4' || selectedName === '5') {
                    let ysZh = null

                    // if (selectedName === '4') {
                    //     ysZh = [
                    //         { name: '翠屏区', value: '1001' },
                    //         { name: '南溪区', value: '1001' },
                    //         { name: '长宁县', value: '1000' },
                    //         { name: '筠连县', value: '1002' },
                    //         { name: '兴文县', value: '1002' },
                    //         { name: '叙州区', value: '1001' },
                    //         { name: '高县', value: '1002' },
                    //         { name: '江安县', value: '1001' },
                    //         { name: '珙县', value: '1002' },
                    //         { name: '屏山县', value: '1001' },
                    //     ]
                    // } else if (selectedName === '1') {
                    //     ysZh = [
                    //         { name: '翠屏区', value: '1001' },
                    //         { name: '南溪区', value: '1002' },
                    //         { name: '长宁县', value: '1000' },
                    //         { name: '筠连县', value: '1002' },
                    //         { name: '兴文县', value: '1000' },
                    //         { name: '叙州区', value: '1001' },
                    //         { name: '高县', value: '1002' },
                    //         { name: '江安县', value: '1002' },
                    //         { name: '珙县', value: '1002' },
                    //         { name: '屏山县', value: '1002' },
                    //     ]
                    // } else if (selectedName === '3') {
                    //     // ysZh = [
                    //     //     { name: '翠屏区', value: '1001' },
                    //     //     { name: '南溪区', value: '1000' },
                    //     //     { name: '长宁县', value: '1002' },
                    //     //     { name: '筠连县', value: '1001' },
                    //     //     { name: '兴文县', value: '1000' },
                    //     //     { name: '叙州区', value: '1001' },
                    //     //     { name: '高县', value: '1002' },
                    //     //     { name: '江安县', value: '1002' },
                    //     //     { name: '珙县', value: '1000' },
                    //     //     { name: '屏山县', value: '1001' },
                    //     // ]
                    //     ysZh = null
                    // } else if (selectedName === '2') {
                    //     ysZh = [
                    //         { name: '翠屏区', value: '1001' },
                    //         { name: '南溪区', value: '1000' },
                    //         { name: '长宁县', value: '1002' },
                    //         { name: '筠连县', value: '1001' },
                    //         { name: '兴文县', value: '1000' },
                    //         { name: '叙州区', value: '1001' },
                    //         { name: '高县', value: '1002' },
                    //         { name: '江安县', value: '1002' },
                    //         { name: '珙县', value: '1000' },
                    //         { name: '屏山县', value: '1001' },
                    //     ]
                    // } else if (selectedName === '5') {
                    //     ysZh = [
                    //         { name: '翠屏区', value: '1001' },
                    //         { name: '南溪区', value: '1002' },
                    //         { name: '长宁县', value: '1000' },
                    //         { name: '筠连县', value: '1002' },
                    //         { name: '兴文县', value: '1001' },
                    //         { name: '叙州区', value: '1001' },
                    //         { name: '高县', value: '1002' },
                    //         { name: '江安县', value: '1001' },
                    //         { name: '珙县', value: '1001' },
                    //         { name: '屏山县', value: '1002' },
                    //     ]
                    // }
                    JcyjApi.map_color_jyl().then(resp => {
                        if (resp.data) {
                            let jyls = resp.data.map(e => {
                                return { name: e.qx, value: e.data, }
                            })
                            map.getLayers().forEach(layer => {
                                //console.log('区划中获取所有图层的遍历', layer)
                                if (layer.get('layerName') === '区县图层颜色') {
                                    //console.log('区划中获取所有图层的遍历', layer.getFeatures())
                                    layer.getSource().clear();
                                    //targetLayer = layer;
                                }
                            });
                            if(selectedName === '1'){
                                jyls=[
                                            { name: '翠屏区', value: '1001' },
                                            { name: '南溪区', value: '1002' },
                                            { name: '长宁县', value: '1000' },
                                            { name: '筠连县', value: '1002' },
                                            { name: '兴文县', value: '1000' },
                                            { name: '叙州区', value: '1001' },
                                            { name: '高县', value: '1002' },
                                            { name: '江安县', value: '1002' },
                                            { name: '珙县', value: '1002' },
                                            { name: '屏山县', value: '1000' },
                                        ]
                            }else if(selectedName === '5'){
                                jyls=[
                                            { name: '翠屏区', value: '1001' },
                                            { name: '南溪区', value: '1002' },
                                            { name: '长宁县', value: '1000' },
                                            { name: '筠连县', value: '1002' },
                                            { name: '兴文县', value: '1001' },
                                            { name: '叙州区', value: '1001' },
                                            { name: '高县', value: '1002' },
                                            { name: '江安县', value: '1001' },
                                            { name: '珙县', value: '1001' },
                                            { name: '屏山县', value: '1002' },
                                        ]
                            }
                            setJyl(jyls)
                        
                        }
            
                    })
                }
              
                //console.log('灾害数量数据1', selectedName)
                // if (selectedName==='洪涝灾害') {
                //     //console.log('灾害数量数据if->', selectedName)
                //     ysZh = data.map(a => {
                //         let b
                //         if (a.value >= 0 && a.value < 200) {
                //             b = '1002'
                //         } else if (a.value >= 200 && a.value < 400) {
                //             b = '1001'
                //         } else if (a.value >= 400) {
                //             b = '1000'
                //         }
                //         return { name: a.name, value: b }
                //     })
                // }else{
                //    ysZh = data.map(a => {
                //     let b
                //     if (a.value >= 0 && a.value < 20) {
                //         b = '1002'
                //     } else if (a.value >= 20 && a.value < 100) {
                //         b = '1001'
                //     } else if (a.value >= 100) {
                //         b = '1000'
                //     }
                //     return { name: a.name, value: b }
                // }) 
                // }

            }
            //console.log('灾害数量数据', data,ysZh)
          
            setStatData(data)
        });
        // const layers=map.getLayers()
        // layers.forEach(layer => {
        //     if (layer === zoneLayer) {
        //         console.log("找到了 zoneLayer:", layer);
        //     }
        // });
        // let targetLayer = null;

        // map.getLayers().forEach(layer => {
        //     console.log('区划中获取所有图层的遍历', layer)
        //     if (layer.get('layerName') === '区县图层颜色') {

        //         targetLayer = layer;
        //     }
        // });

        // if (targetLayer) {
        //     console.log("找到了目标图层:", targetLayer);
        // } else {
        //     console.log("没有找到目标图层");
        // }
        //console.log('区划中获取所有图层', map.getLayerGroup())
    }, [selectedName, map, setJyl])
    // console.log('selectedName',selectedName)
    // console.log('disasterData',disasterData)




    return <>
        {/* <DarkBtn icon={<BarChartOutlined />} title={"统计"} onClick={e => {
            //setPanelKey('yzt-stat')
        }}></DarkBtn> */}
        {<DarkCard style={{
            position: 'absolute',
            right: '20px',
            width: '300px',
            top: '20px',
            bottom: '20px',
            pointerEvents: 'auto',
            borderRadius: 8,
            //display: panelKey === 'yzt-stat' ? 'flex' : 'none'
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                borderBottom: "1px solid #eee",
                paddingBottom: 12,
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>数据统计</div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                    }} onClick={e => {
                        setStatisticAndListSwitch(false);
                        setDetailSwitch(false);
                        //setPanelKey(null)
                    }} />
                </div>
            </div>
            <Row justify="center" align={"middle"}>
                <Col>已打开图层：</Col>
                <Col flex={1} style={{
                    width: 0
                }}>
                    <Select style={{
                        width: '100%'
                    }} options={
                        disasterType?.map(layer => {
                            return {
                                label: layer,
                                value: layer
                            }
                        })
                    } onChange={
                        value => {
                            //console.log('value', value)
                            setSelectedName(value);
                            //if(leftKey!=='2'){

                            //}
                        }

                    }>
                    </Select>
                </Col>
            </Row>
            <div className='fill layout-v'>
                <div className='fill h0 layout-v'>
                    <LittleTitle>区域统计</LittleTitle>
                    <div className='fill h0' style={{
                        overflow: 'auto'
                    }}>
                        {/* <div ref={chartRef} className="wh100"></div> */}
                        <Qytj statData={statData} selectedName={leftKey} />
                    </div>
                </div>
                <div className='fill h0 layout-v'>
                    <LittleTitle>详细列表</LittleTitle>
                    <div ref={rootRef} className="fill h0">
                        <ScrollTable otherHeight={120} parentNode={rootRef.current} className='fill' columns={[{
                            title: '名称',
                            dataIndex: "yhmc"
                            //dataIndex:disasterData.yhdmc;//接口配置好后根据返回数据读取灾害名称
                        }, {
                            title: '操作',
                            width: 70,
                            align: "center",
                            render: (text, record) => {
                                return <Button size="small" type="link" onClick={e => {
                                    map.dispatchEvent({
                                        type: 'yzt.detail',
                                        item: record
                                    })
                                    //console.log("@",record)
                                    //console.log("@",record.id)
                                    setDetailSwitch(true);
                                    setTargetTemplate(record.id);
                                    setRowData(record.geom ? record.geom : null);
                                    record.geom && navByWkt(record.geom, map);
                                }}>详情</Button>
                            }
                        }]} size="small" dataSource={
                            disasterData
                            //     [{
                            //     yhmc: "功能测试",
                            //     geom: "POINT(104.08584581225362 29.169443973211713)",//接入隐患数据，表格显示隐患名称
                            // },]
                        }
                            pagination={{
                                pageSize: 5
                            }}
                            loading={loading}
                        />
                    </div>
                </div>
            </div>
        </DarkCard>}
    </>;
}